<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="../css/reset.css">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	<style>
		html, body {
			height: 100%;
		}
		.boxed {
			position: relative;
			min-height: 100%;
			min-width: 1100px;
		}
		header {
			position: relative;
			top: 0;
			left: 0;
			width: 100%;
			min-width: 1100px;
			height: 50px;
			background-color: #fff;
			box-shadow: inset -4px 0 0 0 #54abd9;
		}
		.navbar-header {
			float: left;
			width: 220px;
			height: 50px;
			background-color: #32404d;
			font-weight: 300;
		}
		.navbar-header img {
			display: block;
			float: left;
			width: 50px;
			height: 50px;
		}
		.navbar-header div {
			display: block;
			float: left;
			line-height: 50px;
			font-size: 20px;
			color: #fff;
		}
		.menu-wrap {
			position: absolute;
			top: 0;
			left: 0;
			width: 220px;
			height: 100%;
			color: #fff;
			background: #32404d
		}
		.menu-wrap span {
			color: #fff;
		}
		.menu-wrap a {
			display: block;
			padding: 12px 20px;
		}
		.menu-wrap a span {
			-webkit-transition: opacity 0.3s ease-in-out 0.3s;
			-o-transition: opacity 0.3s ease-in-out 0.3s;
			-moz-transition: opacity 0.3s ease-in-out 0.3s;
			-ms-transition: opacity 0.3s ease-in-out 0.3s;
			transition: opacity 0.3s ease-in-out 0.3s;
			opacity: 0.7;
		}
		.menu-wrap .ph {
			-webkit-transition: opacity 0.3s;
			-o-transition: opacity 0.3s;
			-moz-transition: opacity 0.3s;
			-ms-transition: opacity 0.3s;
			transition: opacity 0.3s;
			opacity: 0.7;
		}
		.down-list {
			-webkit-transition: opacity 0.3s ease-in-out 0.6s, transform 0.3s ease-in-out;
			-o-transition: opacity 0.3s ease-in-out 0.6s, transform 0.3s ease-in-ou;
			-moz-transition: opacity 0.3s ease-in-out 0.6s, transform 0.3s ease-in-ou;
			-ms-transition: opacity 0.3s ease-in-out 0.6s, transform 0.3s ease-in-ou;
			opacity: 0.7;
			transform: rotate(0deg);
		}
		.menu-wrap .list-header {
			padding: 10px 15px;
			line-height: 18px;
			color: #848C93;
		}
		.ph {
			display: inline-block;
			width: 12px;
			height: 12px;
			padding-right: 10px;
			background: url("../images/ph.png") no-repeat center center;
			background-size: 90% auto;
		}
		.list-divider {
			margin: 5px 0;
			border-top: 1px solid rgba(0,0,0,0.1);
			background-color: transparent;
		}
		.op-list li {
			padding: 10px 20px 12px 53px;
			line-height: 18px;
			background-color: #2c3844;
			font-weight: 300;
			font-size: 14px;
		}
		.op-list {
			overflow: hidden;
			height: 0px;
			-webkit-transition: height 0.2s ease-in-out;
			-o-transition: height 0.2s ease-in-out;
			-moz-transition: height 0.2s ease-in-out;
			-ms-transition: height 0.2s ease-in-out;
			transition: height 0.2s ease-in-out;
		}
		.op-list a {
			padding: 0;
			color: #fff;
			font-weight: 300;
			opacity: 0.7;
			padding-left: 0;
			-webkit-transition: background-color 0.2s, padding-left 0.3s, box-shadow 0.4s;
			-o-transition: background-color 0.2s, padding-left 0.3s, box-shadow 0.4s;
			-moz-transition: background-color 0.2s, padding-left 0.3s, box-shadow 0.4s;
			-ms-transition: background-color 0.2s, padding-left 0.3s, box-shadow 0.4s;
			transition: background-color 0.2s, padding-left 0.3s, box-shadow 0.4s;
		}
		.down-list {
			float: right;
			width: 12px;
			height: 12px;
			background: url("../images/list-down.png") no-repeat center center;
			background-size: 100% 100%;
		}
		/* hover 动画效果书写 */
		.menu-wrap a:hover .ph, .menu-wrap a:hover span, .menu-wrap a:hover .down-list {
			opacity: 1;
		}
		.op-list a:hover {
			opacity: 1;
			padding-left: 3px;
		}
		.active .op-list {
			height: 200px;
		}
		.menu-wrap .active-link, .menu-wrap .active-link span, .menu-wrap .active-link i {
			opacity: 1;
		}
		.content-container {
			padding: 30px 30px 0 240px;
			height: 600px;
		}
		.test {
			width: 100%;
			height: 300px;
			background: #fff;
		}
		.active-link .down-list {
			transform: rotate(90deg);
		}
	</style>
</head>
<body>
	<header>
		<a class="navbar-header" href="">
			<img src="../images/ph.png" alt="">
			<div>
				<span>Nifty</span>
			</div>
		</a>
	</header>
	<div class="boxed">
		<div class="menu-wrap">
			<ul>
				<li class="list-header">Navigation</li>
				<li class="active-link">
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				<li/>
				<li class="list-divider"></li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
						<i class="down-list"></i>
					</a>
					<ul class="op-list">
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
					</ul>
				</li>
				<li class="list-header">Components</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="ph"></i>
						<span>Dashboard</span>
						<i class="down-list"></i>
					</a>
					<ul class="op-list">
						<li>
							<a href="#">Dashboard</a>
						</li>
						<li>
							<a href="#">Dashboard</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<!-- 内容区域 -->
		<div class="content-container">
			<div class="test">
				
			</div>
		</div>
	</div>
	<script src="../js/jquery-1.12.3.js"></script>
	<script>
		$(".down-list").parent().on("click", function() {
			if (!$(this).parent().hasClass("active")) {
				$(".active").removeClass("active");
				$(this).parent().addClass("active");
			} else {
				$(".active").removeClass("active");
			}
		})
		$(".menu-wrap a").on("click", function() {
			if (!$(this).hasClass("active-link")) {
				$(".active-link").removeClass("active-link");
				$(this).addClass("active-link");
			} else {
				$(".active-link").removeClass("active-link");
			}
		})

		$(".test").on("click", function() {
			$(".content-container").load("test.html");
		})
	</script>
</body>
</html>